'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    TouchableWithoutFeedback,
    Platform,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import Toast from '../Utils/toast';
import {ChangePassWordAction} from '../Action/UserAction';
var {NativeModules} = require('react-native');
import {getChangePassWordCode, changePassword,SMSCodeClearStatus} from '../Action/UserAction';
var totalsmstime = 120;
export default class MyChangePasswordPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputPassWord: '',
            inputPhone: '',
            inputsmscode: '',
            sendOK: false,
            showSendButtonText: '获取验证码',
        },
            this.closeKeybord = this.closeKeybord.bind(this);
    }

    BackAction() {
        this.props.navigator.pop();
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearInterval(this.timer);
    }

    shouldComponentUpdate(nextProps, nextState) {
        const {dispatch, UserReducer} = nextProps;
        if (UserReducer.kPhoneChangePassWordCode == 200) {
            dispatch(SMSCodeClearStatus());
            this.setState({
                sendOK: true,
                showSendButtonText: '120秒后重发',
            });
            totalsmstime = 120;
            this.timer = setInterval(
                () => {
                    --totalsmstime;
                    this.setState({
                        showSendButtonText: parseInt(totalsmstime) + '秒后重发',
                    });
                    if (totalsmstime === 0) {
                        this.setState({
                            sendOK: false,
                            showSendButtonText: '获取验证码',
                        });
                        clearInterval(this.timer);
                    }
                }, 1000
            );
        }
        return true;
    }
    componentDidMount() {
        const {UserReducer} = this.props;
        var phone = UserReducer.phone;
        if (phone != null && phone != '') {
            this.setState({
                inputPhone: UserReducer.phone,
            })
        }
    }

    ClickAction(number) {
        const {dispatch} = this.props;
        switch (number) {
            case 0:
                if (this.state.sendOK) {
                    return;
                }
                dispatch(getChangePassWordCode(this.state.inputPhone))
                break;
            case 1:
                this.closeKeybord();
                if (this.state.inputsmscode.length == 0) {
                    Toast.show('请输入您的验证码');
                    return;
                }
                if (this.state.inputsmscode.length != 6) {
                    Toast.show('验证码格式不正确');
                    return;
                }
                if (this.state.inputPassWord.length == 0) {
                    Toast.show('请输入您的密码');
                    return;
                }
                if (this.state.inputPassWord.length < 6 || this.state.inputPassWord.length > 20) {
                    Toast.show('您的密码格式不正确');
                    return;
                }
                this.timer && clearInterval(this.timer);
                this.setState({
                    sendOK: false,
                    showSendButtonText: '获取验证码',
                });
                dispatch(changePassword(Global.Const.token, Global.Const.registeredId, this.state.inputPhone, this.state.inputPassWord, this.state.inputsmscode))
                this.BackAction();
                break;
        }
    }

    render() {
        var hidephone = this.state.inputPhone.substr(0, 3) + '******' + this.state.inputPhone.substr(9, 2);
        var phoneIsNull = false;
        if (this.state.inputPhone == '') {
            phoneIsNull = true;
        } else {
            phoneIsNull = false;
        }
        return (
            <TouchableWithoutFeedback onPress={()=>this.closeKeybord()}>
                <View style={styles.container}>
                    <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                        <View style={{marginTop:24,alignItems:'center'}}>

                            <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.BackAction()}>
                                    <Image style={{resizeMode:'contain',width:21,height:21}}
                                           source={require('../../Image/icon_back.png')}></Image>
                                </TouchableOpacity>
                            </View>
                            <Text style={{fontSize:19}}>修改密码</Text>
                        </View>
                    </View>
                    <View style={{width:Global.Const.size.width,height:320,backgroundColor:'white',marginTop:30,}}>
                        <View
                            style={{alignItems:'center',marginTop:20,width:Global.Const.size.width,height:45,backgroundColor:'white',flexDirection:'row'}}>
                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/account_icon.png')}></Image>
                            <TextInput
                                style={{marginLeft:5,flex:1}}
                                placeholder={phoneIsNull?'请输入您的手机号码':hidephone}
                                maxLength={11}
                                keyboardType={'numeric'}
                                editable={phoneIsNull?true:false}
                                underlineColorAndroid={'transparent'}></TextInput>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>
                        <View
                            style={{alignItems:'center',width:Global.Const.size.width,height:45,marginTop:20,backgroundColor:'white',flexDirection:'row'}}>
                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/icon_identifying_code.png')}></Image>
                            <TextInput
                                style={{marginLeft:5,width:Global.Const.size.width-195}}
                                placeholder={'请输入您的验证码'}

                                maxLength={6}
                                value={this.state.inputsmscode}
                                onChangeText={inputsmscode => this.setState({ inputsmscode })}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}></TextInput>
                            <View style={{width:1,height:30,backgroundColor:Global.Const.transparent}}></View>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.ClickAction(0)}>
                                <Text style={{color:'#24CD78',marginLeft:8}}>{this.state.showSendButtonText}</Text>
                            </TouchableOpacity>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>
                        <View
                            style={{alignItems:'center',width:Global.Const.size.width,height:45,marginTop:20,backgroundColor:'white',flexDirection:'row'}}>
                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/code_icon.png')}></Image>
                            <TextInput
                                style={{marginLeft:5,flex:1}}
                                placeholder={'请输入您的新密码（6-20位英文或数字）'}
                                value={this.state.inputPassWord}
                                onChangeText={inputPassWord => this.setState({ inputPassWord })}
                                secureTextEntry={true}
                                maxLength={20}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}></TextInput>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(1)}>
                            <View
                                style={{marginTop:50,backgroundColor:'#24CD78',borderRadius:20, marginLeft:25,marginRight:25,marginBottom:10,  borderWidth:5,borderColor:'#24CD78',width:Global.Const.size.width-50,height:45, alignItems:'center',justifyContent:'center'}}>
                                <Text style={{color:'white',fontSize:18}}>确认修改</Text>
                            </View>
                        </TouchableOpacity>
                    </View>

                </View>
            </TouchableWithoutFeedback>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});
